<template>
  <div class="out-style">
    <ach-detail :title="title"></ach-detail>
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm" :rules="rules">
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.fbcx')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.fbxg')+':'" prop="publishEffect">
          <el-select
            v-model="ruleForm.publishEffect"
            @change="changeList"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-if="ruleForm.publishEffect === '4'"
            :placeholder="$t('message.p-zdylb')"
            v-model="ruleForm.remark"
            style="width: 400px; margin-left: 20px;"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.cgms')+':'" prop="resultDesc">
          <el-input
            style="width: 620px;"
            type="textarea"
            :rows="5"
            :placeholder="$t('message.p-srnr')"
            maxlength="512"
            show-word-limit
            v-model="ruleForm.resultDesc"
          ></el-input>
        </el-form-item>
        <!-- 上传文件 -->
        <el-form-item :label="$t('message.scfj')+':'">
          <upload-file ref="file" :pfileList="cfileList"></upload-file>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.txrxx')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.tbr')+':'" prop="filledBy">
          <el-input
            :placeholder="$t('message.p-tbr')"
            v-model="ruleForm.filledBy"
            style="width: 620px;"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.lxdh')+':'" prop="phone">
          <el-input
            :placeholder="$t('message.p-phone')"
            v-model="ruleForm.phone"
            style="width: 620px;"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.zjhm')+':'" prop="seatNumber">
          <el-input
            :placeholder="$t('message.p-tell')"
            v-model="ruleForm.seatNumber"
            style="width: 620px;"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="btn">
      <button class="save" @click="pushSave('ruleForm')">{{$t('message.zc')}}</button>
      <button type="button" @click="submit('ruleForm')" class="submit">{{$t('message.tjsh')}}</button>
    </div>
  </div>
</template>


<script>
import achDetail from "@components/achDetail.vue";
import {
  checkPhone,
  checkAmount,
  checkFilledBy,
  checkLandlinee
} from "@assets/js/validator.js";
import uploadFile from "@components/uploadFile/uploadFile.vue";
export default {
  data() {
    return {
      pageType: this.$route.name === "achTrackEdit" ? "edit" : "add",
      title: this.$t("message.zzfk-title"),
      ruleForm: {
        publishEffect: "",
        remark: "",
        resultDesc: "",
        filledBy: "",
        phone: "",
        seatNumber: "",
        ossUrlList: []
      },
      cfileList: [],
      proList: [],
      rules: {
        filledBy: [
          { required: true, validator: checkFilledBy, trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        publishEffect: [
          { required: true, message: this.$t("message.m1"), trigger: "change" }
        ],
        remark: [
          { required: true, message: this.$t("message.m1"), trigger: "blur" },
          { max: 64, message: this.$t("message.m3"), trigger: "blur" }
        ],
        resultDesc: [
          { required: true, message: this.$t("message.m1"), trigger: "blur" },
          { max: 512, message: this.$t("message.m3"), trigger: "blur" }
        ],
        seatNumber: [{ validator: checkLandlinee, trigger: "blur" }]
        // amount: [{ required: true, validator: checkAmount, trigger: 'blur' }],
      },
      list: [
        {
          label: this.$t("message.hh"),
          value: "1"
        },
        {
          label: this.$t("message.hao"),
          value: "2"
        },
        {
          label: this.$t("message.yb"),
          value: "3"
        },
        {
          label: this.$t("message.qt"),
          value: "4"
        }
      ]
    };
  },
  components: {
    achDetail,
    uploadFile
  },
  mounted() {
    // 编辑追踪，需要回填默认数据
    this.$axios
      .get("/api/releaseResultTrack/infoEcho", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.ruleForm = res.data;
            //附件回显
            this.cfileList = this.ruleForm.ossUrlList;
            this.ruleForm.ossUrlList.forEach(item => {
              this.$refs.file.fileLists.push(item);
            });
          }
        } else {
          this.$message.error(res.message);
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    changeList(evt) {
      this.ruleForm.publishEffect = evt;
    },
    // 暂存
    pushSave() {
      // 附件处理
      if (this.$refs.file.fileLists.length !== 0) {
        this.ruleForm.ossUrlList = this.$refs.file.fileLists;
      } else {
        this.ruleForm.ossUrlList = this.cfileList;
      }
      const params = {
        rid: this.$route.query.id, // 成果id
        id: this.ruleForm.id, // 追踪id
        publishEffect: this.ruleForm.publishEffect,
        remark: this.ruleForm.remark,
        resultDesc: this.ruleForm.resultDesc,
        filledBy: this.ruleForm.filledBy,
        phone: this.ruleForm.phone,
        seatNumber: this.ruleForm.seatNumber,
        ossUrlList: this.ruleForm.ossUrlList
      };

      this.$axios
        .post("/api/releaseResultTrack/tempStorage", params)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t("message.zccg"));
            this.ruleForm = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    submit(formName) {
      //提交
      this.$refs[formName].validate(valid => {
        if (valid) {
          // if (this.ruleForm.phone && !/^\d[\d-]{5,19}$/g.test(this.ruleForm.phone)) {
          //     this.$message.error('联系电话格式错误')
          //     return
          // }

          // if (!/^\d+(\.\d\d?)?$/g.test(this.ruleForm.amount)) {
          //     this.$message.error('金额格式错误，如果是小数，最多支持2位')
          //     return
          // }
          // 附件处理
          this.ruleForm.ossUrlList = this.$refs.file.fileLists;
          const params = {
            rid: this.$route.query.id, // 合同id
            id: this.ruleForm.id, // 追踪id
            publishEffect: this.ruleForm.publishEffect,
            remark: this.ruleForm.remark,
            resultDesc: this.ruleForm.resultDesc,
            filledBy: this.ruleForm.filledBy,
            phone: this.ruleForm.phone,
            seatNumber: this.ruleForm.seatNumber,
            ossUrlList: this.ruleForm.ossUrlList
          };

          this.$axios
            .post("/api/releaseResultTrack/submit", params)
            .then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t("message.czcg"));

                this.$router.push({
                  path: "/achievements",
                  query: {}
                });
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.$message.error(this.$t("message.m14"));
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.out-style {
  width: 88%;
  background: #fff;
  margin: 0 auto;
}
.inner-style {
  width: 100%;
  margin: 0 auto;
}
.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}
.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}
h2 {
  margin: 0 0 30px;
  font-size: 18px;
  text-align: center;
}
.el-form-item {
  margin-bottom: 16px;
}
.spanStyle {
  margin-left: 16px;
  margin-right: 4px;
  font-size: 14px;
  color: #606266;
}

.btn {
  text-align: center;
  margin: 40px 0 50px 0;
}
.submit {
  width: 171px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}
.save {
  width: 171px;
  margin-right: 46px;
  height: 40px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
</style>